<template>
	<view>
		
		<view class="w100 flex flex_jc flex_wrap box">
			<view class="w710 flex flex_wrap">
				<view class="e1 mt20 w100 flex flex_ac">
					<view class="fz25">已收集：{{mycard_count}}/{{allcard_count}}</view>
					<view class="progress ml20">
						<u-line-progress :percentage="baifenbi" :showText="true" activeColor="#0066FF" inactiveColor="#ececec"></u-line-progress>
					</view>
				</view>
			
				<navigator url="/pages/rank2/index" class="e2 mt20 borr20">
					<u--image :showLoading="true" src="/static/images/ele3.png" width="100%" height="100%"></u--image>
					<view class="desc_box">
						<view class="desc mt30 txt_c w100">单日排行榜</view>
					</view>
					<view class="p1" style="font-size: 25rpx;width: 230rpx;left: 10rpx;color: #ffffff">
					　　	每天排名第一的用户，第二天将可获得额外一倍的SSS卡奖励
					</view>
				</navigator>
				
				<view class="e3 ml20 mt20">
					<navigator url="/pages/rank/index" class="v1 w100 borr20 hidden">
						<u--image :showLoading="true" src="/static/images/knowledge-3.png" width="100%" height="100%"></u--image>
						<view class="desc_box w100">
							<view class="d1 txt_c w100">集卡排行总榜</view>
							<view class="d2 mt20 txt_c w100 fz30">实时更新榜单</view>
						</view>
					</navigator>
					<view @click="goUkapai()" class="v2 w100 mt20 borr20">
						<u--image :showLoading="true" src="/static/images/ele7.png" width="100%" height="100%"></u--image>
						<view class="desc_box w100">
							<view class="d1 txt_c w100">我的集卡馆</view>
						</view>
					</view>
				</view>
				
				<view class="kapai_box w100 flex flex_jc mt30">
					<view class="kapai flex flex_ac flex_jc">
						<view class="card flex flex_ac flex_jc">
							<view class="card2 flex flex_ac flex_jc" :class="is_animation?'animation':''" v-if="!show_card">
								<image src="/static/images/ultraman.png"></image>
							</view>
							<view class="card3 flex flex_ac flex_jc" v-if="show_card">
								<image style="width: 100%;height: 100%;" :src="card_src"></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="e4 w100 flex flex_jc flex_ac">
					<view class="choujiang" @click="choujiang()">抽卡</view>
					<view class="tips flex flex_wrap flex_ac pd0_20" v-if="is_login">
						<view class="hidden2">今日剩余可抽奖次数：{{ccount}}</view>
					</view>
					
					<view @click="tuijian_window_open()" class="tips2 flex flex_wrap flex_ac pd0_20">
						<view class="hidden2">更多推荐</view>
					</view>
					
				</view>
				
				<view class="w100 flex flex_ac flex_jc mb10"
					style="color: red;" v-if="ccount==0 && show_ad && jcount>0"
				>观看视频可再次获得抽取SSS卡机会</view>
				
				<view class="share flex flex_jc w100">
					<button type="default" open-type="share" >
						<view class="share-box">和小伙伴一起抽卡</view>
					</button>
				</view>
			</view>
		</view>
		
		<!-- 推荐列表 -->
		<u-popup :closeOnClickOverlay = "false" :round="20" mode="center" :show="tuijian_window_show" @close="tuijian_window_close">
			<view class="flex flex_wrap flex_jc">
				<view class="tuijian_window prel flex flex_wrap flex_jsa prel">
					<button class="close prel"
						hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						@click="tuijian_window_close()">
						<image class="w100" mode="widthFix" src="../../static/images/pop/close.png"></image>
					</button>
					<image style="width: 80%;margin-top: -60rpx;" mode="widthFix" src="../../static/images/pop/moretuijian.png"></image>
					<view class="tuijianli_box flex flex_wrap flex_jsa flex_ac">
						<view @click="tuijianxcxJump(item)" class="tuijianli" v-for="(item,index) in recommend_xcx">
							<image mode="widthFix" class="w100"
								:src="item.head_img"></image>
							<view class="fz25 word w100 txt_c hidden1">{{item.name}}</view>	
						</view>
					</view>
				</view>
				<ad class="mt20" :unit-id="xcx_ad.banner" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {chouKa,choukaInit,getRecommendXcx} from "@/api/api"
	import {getToday,playSound} from "@/utils/common.js"
	export default {
		data() {
			return {
				tuijian_window_show:false,
				is_animation:false,
				show_card:false,
				card_src:'',
				rmsg:'',
				ccount:0,
				jcount:0,
				mycard_count:0,
				allcard_count:0,
				baifenbi:0,
				is_login:false,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				recommend_xcx:getApp().globalData.recommend_xcx,
			}
		},
		
		onLoad: function (option) {
			
		},
		onShow:function(){
			
			this.is_login = uni.getStorageSync('is_login')?uni.getStorageSync('is_login'):false
			if(this.is_login){
				this.choukaInit()
			}
			
		},
	
		methods:{
			adLoad() {
			    console.log('Banner 广告加载成功')
			},
			adError(err) {
			    console.error('Banner 广告加载失败', err)
			},
			adClose() {
				console.log('Banner 广告关闭')
			},
			
			tuijianxcxJump(item){
				wx.navigateToMiniProgram({
					appId: item.appid,
					path: item.path,
				})
			},
			
			tuijian_window_close(){
				this.tuijian_window_show = false
			},
			
			tuijian_window_open(){
				if(this.recommend_xcx.length==0){
					getRecommendXcx().then(res=>{
						if(res.code==0){
							this.recommend_xcx = res.data.list
							if(this.recommend_xcx.length>0){
								getApp().globalData.recommend_xcx = res.data.list
								this.tuijian_window_show = true
							}else{
								this.msg('暂无推荐')
							}
							
						}
					})
				}else{
					this.tuijian_window_show = true
				}
				
			},
			
			goUkapai(){
				if(this.isLogin()){
					uni.navigateTo({
						url: '/pages/ukapai_list/index',
					}); 
				}
			},
			choujiang(){
				if(this.isLogin()){
					var that = this
					//判断抽卡次数
					if(this.ccount>0){
						that.chouKa2('dayc')
					}else{
						//显示激励广告
						if(that.show_ad&&that.jcount>0){
							
							// 在页面中定义激励视频广告
							let videoAd = null
							
							// 在页面onLoad回调事件中创建激励视频广告实例
							if (wx.createRewardedVideoAd) {
							  videoAd = wx.createRewardedVideoAd({
							    adUnitId: that.xcx_ad.jili
							  })
							  videoAd.onLoad(() => {})
							  videoAd.onError((err) => {})
							  videoAd.onClose((res) => {
								  if(res&&res.isEnded){
									 that.chouKa2('jili')
								  }else{
									 that.msg('观看完广告后自动获得抽卡机会哦')
								  }
							  })
							}
							
							// 用户触发广告后，显示激励视频广告
							if (videoAd) {
							  videoAd.show().catch(() => {
							    // 失败重试
							    videoAd.load()
							      .then(() => videoAd.show())
							      .catch(err => {
							        console.log('激励视频 广告显示失败')
							      })
							  })
							}
						
						}else{
							that.msg('你今天的抽卡次数已用光，请明天再来')
						}
					}
				}
			},
			
			chouKa2(type){
				var that = this
				if(!this.is_animation){
					this.show_card = false
					this.is_animation = true
					
					chouKa(type).then(res=>{
						if(res.code==0){
							this.card_src = res.data.card
							if(type=='dayc'){
								this.ccount = this.ccount - 1;
							}else if(type=='jili'){
								this.jcount = this.jcount - 1;
							}
						}else{
							this.card_src = ''
						}
						this.rmsg = res.msg
					})
					//发出声音
					playSound('/static/music/xuanzhuan.mp3')
					setTimeout(function(){
						
						setTimeout(function(){
							playSound('/static/music/crash2.mp3')
						},200)
						
						that.is_animation = false
						uni.showToast({
							title: that.rmsg,
							icon:'none',
							duration:2500
							
						});
						if(that.card_src!=''){
							that.show_card = true
						}
						
						if(that.show_ad){
							// 在页面中定义插屏广告
							let interstitialAd = null
							
							// 在页面onLoad回调事件中创建插屏广告实例
							if (wx.createInterstitialAd) {
							  interstitialAd = wx.createInterstitialAd({
								adUnitId: 'adunit-883dc44985f22866' 
							  })
							  interstitialAd.onLoad(() => {})
							  interstitialAd.onError((err) => {})
							  interstitialAd.onClose(() => {})
							}
							
							// 在适合的场景显示插屏广告
							if (interstitialAd) {
							  interstitialAd.show().catch((err) => {
								console.error(err)
							  })
							}
						}
						
					},3500)
				}
			},
			
			choukaInit(){
				choukaInit().then(res=>{
					if(res.code==0){
						this.ccount = res.data.chouka_count;
						this.jcount = res.data.chouka_jili_count
						this.mycard_count = res.data.mycard_count;
						this.allcard_count = res.data.allcard_count
						if(this.mycard_count>0){
							this.baifenbi = this.mycard_count/this.allcard_count*100
						}
					}
				})
			},
			
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
			
			isLogin(){
				if(this.is_login){
					return true
				}else{
					//登录
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}
			}
		}
	}
</script>
<style>
	.u-popup__content{background-color: transparent!important;}
	.box .u-transition{width: 100%;height: 100%;}
	page{background-color: #F5F5F5;}
	
	button::after {
	  border: none;
	}
	button {
	  background-color: #f5f5f5!important;
	}
	button {
	  border-radius:0;
	}
</style>
<style scoped>
	.tuijianli .word{color:#fff}
	.tuijianli{width: 170rpx;height: 220rpx; overflow: hidden;border: 5rpx solid #3f51b5;
		border-radius: 20rpx;box-sizing: border-box;}
	.tuijian_window .close{position: absolute;right: -30rpx;top: -35rpx;width: 60rpx;}
	.tuijianli_box{width: 560rpx;}
	.tuijian_window{width: 600rpx;height: 600rpx;background-color: #03A9F4;border-radius: 30rpx;}
	
	
	@keyframes big{
	    0%{
	      transform: scale(1);  /*开始为原始大小*/
	  }
	  25%{
	      transform: scale(1.2); /*放大1.1倍*/
	  }
	  50%{
	      transform: scale(1);
	  }
	  75%{
	      transform: scale(1.2);
	  }
	}
	
	
	.share-box{height: 60rpx;line-height: 60rpx;background-color: #0066ff;color: #FFFFFF;text-align: center;
		font-size: 30rpx;border-radius: 10rpx;letter-spacing: 10rpx;margin: 20rpx 0;padding: 0 20rpx;animation: big 2s linear infinite;}
	
	.pop{background-color: #FFFFFF;width: 420rpx;height: 600rpx;}
	
	.card2 image{width: 420rpx;height: 177rpx;}
	.animation{animation: card_turn 3.5s;}
	.card3{width: 100%;height: 100%;position: absolute;z-index: 10;}
	.card2{width: 100%;height: 100%;background-color: #212534;color: #FEB756;
			box-shadow: -6px -6px 20px rgba(255, 255, 255, 1),6px 6px 20px rgba(0, 0, 0, .1); 
			letter-spacing: 10rpx;position: absolute;z-index: 4;}
	.card::after{width: 800rpx;height: 800rpx; background-image: linear-gradient( #5ddcff,#3c67e3,#4e00c2 ); animation: spin 2.5s linear infinite;
		z-index: -1;position: absolute;content: '';}
	.kapai .card{width: 420rpx;height: 600rpx;position: relative;border-radius: 15rpx;background-color: #F5F5F5;}
	.kapai{width: 420rpx;height: 600rpx;border-radius: 15rpx;position: relative;padding: 20rpx;overflow: hidden;}
	
	.box{height: 100vh;}
	.e4 .tips{position: absolute;top: 30rpx;right: -1px;width: 180rpx;border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;background-color: #FEB756;border: 1px solid #FF6260;
		color: #FFFFFF;font-size: 30rpx;text-align: center;height: 80rpx;}
	.e4 .tips2{position: absolute;top: 30rpx;left: -1px;width: 180rpx;height: 80rpx;
		border-top-right-radius: 30rpx;border-bottom-right-radius: 30rpx;background-color: #FEB756;
		border: 1px solid #FF6260;color: #FFFFFF;font-size: 30rpx;text-align: center;}
	.e4 .choujiang{width: 200rpx;height: 200rpx;line-height: 200rpx;border-radius: 100%;background:linear-gradient(to bottom, #FFA665, #FF742D);box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.42);text-align: center;font-size: 40rpx;color: #FFFFFF;font-weight: bold;}
	.e4{position: relative;overflow: hidden;margin-top: 30rpx;margin-bottom: 30rpx;}
	.e3 .d1{margin-top: 50rpx;font-weight: bold;font-size: 40rpx;}
	.e3 .desc_box{position: absolute;left: 0;top: 0;height: 190rpx;color: #FFFFFF;}
	.e3 .v1,.e3 .v2{height: 190rpx;background-color: #FFA776;position: relative;}
	.e3{width: 440rpx;height: 400rpx;}
	.e2 .p1{position: absolute;bottom: 0;left: 50rpx;width: 150rpx;height: 295rpx;}
	.e2 .desc_box{position: absolute;left: 0;top: 0;width: 250rpx;height: 400rpx;color: #FFFFFF;font-weight: bold;font-size: 40rpx;}
	.e2{width: 250rpx;height: 400rpx;background:linear-gradient(to bottom right, #FFA776, #FF6260);position: relative;}
	.progress{width: 300rpx;}
	.e1{color: #0066FF;font-weight: bold;}
	
	@keyframes spin{
		0%{
			transform: rotate(0);
		}
		100%{
			transform: rotate(359deg);
		}
	}
	
	
	@keyframes card_turn{
		0%{
			transform: rotateY(0deg);
		}

		
		100%{
			transform: rotateY(10799deg);
			z-index: 5;
			background-color: #FFFFFF;
		}
	
	}
	
	button::after{
	 	border: none;
	}
	button{
		border-radius: 0!important;
		margin: 0;
		padding: 0;
		position: relative;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
		overflow: inherit;
		background-color: transparent!important;
	}
	
</style> 